<template>
  <u-upload
    ref="upload"
    :action="`${projectSetting.appApiUrl}/upload/putFile`"
    :maxCount="maxCount"
    :max-size="maxSize"
    :width="width"
    :height="height"
    :header="header"
    :form-data="formData"
    :disabled="disabled"
    :multiple="multiple"
    :show-progress="showProgress"
    :show-upload-list="showUploadList"
    :auto-upload="autoUpload"
    :custom-btn="customBtn"
    @on-list-change="onListChange"
    @on-remove="fileOnRemove"
    @on-success="fileOnSuccess"
  >
    <view slot="addBtn">
      <slot name="addBtn"></slot>
    </view>
  </u-upload>
</template>

<script>
import projectSetting from '@/settings/projectSetting.js'
import dokey from '@/utils/dokey.js'
import { mapGetters, mapState } from 'vuex'
export default {
  props: {
    value: {
      type: [Number, Array],
      default: function () {
        return []
      },
    },
    args: {
      type: Object,
      required: true,
    },
    field: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      projectSetting,
      current_field: this.value,
      current_args: this.args,
    }
  },
  computed: {
    ...mapGetters({
      token: 'user/getToken',
    }),
    ...mapState({
      globSchoolId: (state) => state.projectSetting.globSchoolId,
    }),
    width() {
      if (this.current_args.width) {
        return this.current_args.width
      }
      return '200rpx'
    },
    height() {
      if (this.current_args.height) {
        return this.current_args.height
      }
      return '200rpx'
    },
    // 上传数量限制
    maxCount() {
      let limit = this.$edu.test.getDefValue(this.current_args.count, 0)
      return limit > 0 ? limit : 999
    },
    // 选择单个文件的最大大小，默认2M
    maxSize() {
      let size = this.$edu.test.getDefValue(this.current_args.size, 0)
      return size > 0 ? size : 2 * 1024 * 1024
    },
    // 禁止操作
    disabled() {
      if (this.current_args.disabled) {
        return true
      }
      return false
    },
    // 多文件上传
    multiple() {
      if (this.current_args.count == 1) {
        return false
      }
      return true
    },
    // 是否显示进度条
    showProgress() {
      if (this.current_args.progress) {
        return true
      }
      return false
    },
    // 自动上传
    autoUpload() {
      if (this.$edu.test.isUndef(this.current_args.autoUpload)) return true
      if (this.current_args.autoUpload) {
        return true
      }
      return false
    },
    // 自定义选择图片的按钮
    customBtn() {
      if (this.current_args.customBtn) {
        return true
      }
      return false
    },
    // 上传额外携带的参数
    formData() {
      if (this.$edu.test.isDef(this.current_args.formFata)) {
        return this.current_args.formFata
      }
      return {}
    },
    // 上传携带的头信息，对象形式
    header() {
      let data = {
        'Is-Axios': 1,
        'E-DEVICE-TYPE': this.projectSetting.appDeviceType,
        'E-APP-ID': this.projectSetting.appId,
        'E-MHM-ID': this.globSchoolId,
        'E-SHARE-CODE': this.$store.state.projectSetting.globShareCode,
        'E-USER-AK': this.token.ak,
        'E-USER-SK': this.token.sk,
        ...dokey.secretdate(this.formData),
      }
      return data
    },
    // 是否显示组件内部的图片预览
    showUploadList() {
      if (this.current_args.showUploadList === false) return false
      return true
    },
  },
  watch: {
    current_field(value) {
      this.$emit('update:value', value)
    },
    value: {
      handler(now, old) {
        this.current_field = now
      },
    },
  },
  methods: {
    fileOnRemove: function () {
      this.setValue(0, false)
      this.$emit('file:event', {
        event: 'fileOnRemove',
      })
    },
    fileOnSuccess: function (response, index, fileList) {
      let attachId = response.id || response.data.id
      this.setValue(attachId, true)
      this.$emit('file:event', {
        event: 'fileOnSuccess',
        file: fileList[index].file,
        fileList: fileList[index],
        response: response,
      })
    },
    setValue: function (attachId, action) {
      if (action === true) {
        // 添加
        if (this.$u.test.array(this.current_field)) {
          this.current_field.push(attachId)
        } else {
          this.current_field = attachId
        }
      } else {
        if (this.$u.test.array(this.current_field)) {
          this.current_field.splice(
            this.current_field.findIndex((item) => item === attachId),
            1
          )
        } else {
          this.current_field = 0
        }
      }
    },
    onListChange(n, index) {
      this.$emit('on-list-change', n, this.index)
    },
    // 用户通过ref手动的形式，移除一张图片
    remove(index) {
      this.$refs.upload.remove(index)
    },
    // 清除列表
    clear() {
      this.$refs.upload.clear()
    },
  },
}
</script>

<style></style>
